import React, {Component} from 'react'
import {
    StyleSheet,
    Text,
    View, Dimensions, FlatList, ScrollView
} from 'react-native';
import {observable, runInAction, autorun} from 'mobx';
import {observer} from 'mobx-react/native';
import Shopheader from '../component/shopheader'
import Shopgridviewpage from '../component/shopgridviewpage'
import Shopsixpage from '../component/shopsixpage'
import ShopListpage from '../component/ShopListpage'
import api from '../util/api'
let {height, width} = Dimensions.get('window');
var jsondata = require('../json/shoppingsixpage.json');
var listdatadata = require('../json/shoppinglist.json');

@observer
export default class Shopping extends Component {

    @observable
    dataSource = listdatadata.data;
    @observable
    isRefresh = true;

    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        return (
            <View>
                <ScrollView
                    horizontal={false}>
                <Shopheader/>
                <Shopgridviewpage menuInfos={this.loadMenuInfos()}/>
                <View style={styles.lineview}/>
                <Shopsixpage datas={this.sixdata()}/>
                <View style={styles.lineview}/>
                <View style={styles.titleview}>
                    <Text style={styles.titletext}>
                        猜你喜欢
                    </Text>
                </View>
                <FlatList
                    data={this.dataSource}
                    keyExtractor={item => item.id}
                    renderItem={({item}) => this.renderItem(item)}/>
                </ScrollView>
            </View>
        );
    }

    renderItem = (item) => {
        const {navigate} = this.props;
        return (
        <ShopListpage navigate={navigate} itemData={item} itemPress={() => this.itemPress(item)}/>
        )
    };
    fetchData = () => {
        this.dataSource = listdatadata.data;
        this.isRefresh=false;
        console.info(this.dataSource);
    };

    loadMenuInfos() {
        return api.menuInfo
    };

    sixdata() {
        return jsondata.data;
    };

    listdata() {
        return listdatadata.data;
    };
}
const styles = StyleSheet.create({
    lineview: {
        width: width,
        height: 14,
        backgroundColor: '#f3f3f3'
    },
    titleview: {
        height: 50,
        borderWidth: 1,
        borderColor: '#eee',
        backgroundColor: '#fff',
        justifyContent: 'center'
    },
    titletext: {
        marginLeft: 20,
        fontSize: 20
    }
});

module.exports = Shopping